// my-button.js
const buttonTemplate = document.createElement('template');
buttonTemplate.innerHTML = `
    <style>
        button {
            background-color: #4CAF50;
            color: white;
            padding: 4px 12px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }
        button:hover {
            opacity: 0.8;
        }
    </style>
    <button><slot></slot></button>
`;

class MyButton extends HTMLElement {
    constructor() {
        super();
        // 创建一个Shadow DOM,并将其附加到当前元素
        // mode:'open'表示可以从外部JavaScript访问Shadow DOM
        // 这样可以将组件的样式和结构封装起来,避免与页面其他元素发生冲突
        this.attachShadow({ mode: 'open' });
        // shadowRoot 是 Shadow DOM 的根节点
        // Shadow DOM 提供了一种封装组件的方式,使其样式和结构与主文档隔离
        // 通过 shadowRoot 我们可以访问和操作 Shadow DOM 树
        this.shadowRoot.appendChild(buttonTemplate.content.cloneNode(true));
        // 在 Shadow DOM 中查找按钮元素并添加点击事件监听器
        this.shadowRoot.querySelector('button').addEventListener('click', () => {
            // 派发一个自定义事件
            this.dispatchEvent(new CustomEvent('btn-click', {
                bubbles: true, // 事件冒泡
                composed: true, // 允许事件穿透 Shadow DOM 边界
                detail: { message: '按钮被点击了！' } // 可以传递额外数据
            }));
        });
    }

    connectedCallback() {
        console.log('MyButton 来了！');
    }

    disconnectedCallback() {
        console.log('MyButton 走了！');
    }
}

// 导出组件定义
export { MyButton };
// 或者直接定义
// customElements.define('my-button', MyButton); // 如果你希望在模块加载时就定义
